<template>
    <div ref="param">
        <el-tabs :tab-position="tabPosition" v-model="activeName" style="height: 750px; overflow: auto;"
            @tab-click="handleClick">
            <!-- v-hasPermi="['warningMessage:list']" -->
            <el-tab-pane label="预警日志" name="warn">
                <div class="card-container">
                    <el-row :gutter="10">
                        <el-form :model="queryWarnParams" ref="queryWarnParams" :inline="true" label-width="100px">
                            <el-col :span="18" :offset="0">
                                <el-form-item label="事件ID" prop="eewId">
                                    <el-input v-model="queryWarnParams.eewId" placeholder="请输入事件ID" clearable
                                        @keyup.enter.native="handleWarnQuery" />
                                </el-form-item>
                                <el-form-item label="时间" prop="warnSearchTime">
                                    <span @click.once="changeInitCalendarPage" class="date-box">
                                        <el-date-picker v-model="queryWarnParams.warnSearchTime" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            value-format="timestamp" :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </span>
                                </el-form-item>
                                <el-form-item label="消息类型" prop="msgType">
                                    <el-radio-group v-model="queryWarnParams.msgType">
                                        <el-radio v-for="dict in dict.type.sys_msg_type" :key="dict.value"
                                            :label="dict.value">{{ dict.label
                                            }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item>
                                    <el-button icon="el-icon-refresh" size="mini" @click="resetWarnQuery">重置</el-button>
                                    <el-button icon="el-icon-search" size="mini" @click="handleWarnQuery(true)">所有记录
                                    </el-button>
                                    <el-button icon="el-icon-search" size="mini" @click="handleWarningTogether">当前记录
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                </div>
                <div class="warn-container">
                    <el-collapse v-if="warnTabData.length > 0">
                        <el-collapse-item v-for="item in warnTabData" :key="item.eewId">
                            <template slot="title">
                                <div class="collapse-title">
                                    <div style="min-width: 240px;">
                                        <span>事件ID:</span>
                                        <span> {{ item.eewId }}</span>
                                    </div>
                                    <div>
                                        <span>消息类型:</span>
                                        <span>{{ formatType(item.msgType) }}</span>
                                    </div>
                                    <div style="min-width: 210px;">
                                        <span>消息来源:</span>
                                        <span> {{ item.msgSource }}</span>
                                    </div>
                                    <div style="min-width: 220px;">
                                        <span>消息生产者:</span>
                                        <span>{{ item.msgSource }}</span>
                                    </div>
                                    <div>
                                        <span>报数:</span>
                                        <span> {{ item.viewTableList.length }}</span>
                                    </div>
                                </div>
                            </template>
                            <div class="collapse-content" v-for=" val in item.viewTableList" :key="val.msgId">
                                <div class="collapse-top">
                                    <div class="left">
                                        <span>消息ID:</span>
                                        <span>{{ val.msgId }}</span>
                                        <svg-icon class-name="warn-icon" :icon-class="formatLevel(val.localWarningLevel)" />
                                        <svg-icon class-name="warn-icon"
                                            :icon-class="val.isResponse == '已响应' ? 'responded' : 'unresponse'" />
                                    </div>
                                    <div class="right">
                                        <span @click="handleWarnMessage(val)">消息</span>
                                        <span @click="handleWarnReceive(val)">回复</span>
                                        <span v-show="val.msgType != '0199'" @click="handleWarnRespon(val)">响应</span>
                                    </div>
                                </div>
                                <div class="collapse-bottom">
                                    <div>
                                        <!-- <svg-icon icon-class="red" /> -->
                                        <span>{{ val.msgType == '0199' ? '取消消息' : val.serialNumber == '1' ? '首报' : '第' +
                                            val.serialNumber + '报' }}</span>
                                    </div>
                                    <div>
                                        <span>震级:</span>
                                        <span>{{ val.magnitude == "null" ? "-" : val.magnitude }}</span>
                                    </div>
                                    <div>
                                        <span>震中烈度:</span>
                                        <span>{{ val.epiintensity == "null" ? "-" : val.epiintensity }}</span>
                                    </div>
                                    <div>
                                        <span>震源深度:</span>
                                        <span>{{ val.focdepth == "null" ? "-" : val.focdepth }}</span>
                                    </div>
                                    <div>
                                        <span>发震时间: </span>
                                        <span>{{ val.oritimeStr == "null" ? "-" : val.oritimeStr }}</span>
                                    </div>
                                    <div>
                                        <span>震中地名:</span>
                                        <span>{{ val.locname == "null" ? "-" : val.locname }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <pagination v-show="warnTotal > 0" :total="warnTotal" :page.sync="queryWarnParams.pageNum"
                    :limit.sync="queryWarnParams.pageSize" @pagination="getWarnList" />
            </el-tab-pane>
            <!-- v-hasPermi="['quickReportMessage:list']" -->
            <el-tab-pane label="速报日志" name="report">
                <div class="card-container">
                    <el-row :gutter="10">
                        <el-form :model="queryReportParams" ref="queryReportParams" :inline="true" label-width="80px">
                            <el-col :span="18" :offset="0">
                                <el-form-item label="事件ID" prop="eewId">
                                    <el-input v-model="queryReportParams.eewId" placeholder="请输入事件ID" clearable
                                        @keyup.enter.native="handleReportQuery" />
                                </el-form-item>
                                <el-form-item label="时间" prop="reportSearchTime">
                                    <span @click.once="changeInitCalendarPage" class="date-box">
                                        <el-date-picker style="width: 360px;" v-model="queryReportParams.reportSearchTime"
                                            type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                            end-placeholder="结束日期" value-format="timestamp" :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </span>
                                </el-form-item>
                                <el-form-item label="消息类型" prop="msgType">
                                    <el-radio-group v-model="queryReportParams.msgType">
                                        <el-radio v-for="dict in dict.type.sys_report_type" :key="dict.value"
                                            :label="dict.value">{{
                                                dict.label }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item>
                                    <el-button icon="el-icon-refresh" size="mini" @click="resetReportQuery">重置</el-button>
                                    <el-button icon="el-icon-search" size="mini" @click="handleReportQuery(true)">所有记录
                                    </el-button>
                                    <el-button icon="el-icon-search" size="mini" @click="handleReportTogether">当前记录
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                </div>
                <div class="card-container">
                    <div v-for="val in reportTabData" :key="val.eewId" class="report-container">
                        <div class="collapse-top">
                            <div class="left">
                                <span>事件ID:</span>
                                <span>{{ val.eewId }}</span>
                                <svg-icon class-name="warn-icon"
                                    :icon-class="val.isResponse == '已响应' ? 'responded' : 'unresponse'" />
                            </div>
                            <div class="right">
                                <span @click="handleMessage(val)">消息</span>
                                <span @click="handleReceive(val)">回复</span>
                                <span @click="handleRespon(val)">响应</span>
                            </div>
                        </div>
                        <div class="report-content">
                            <div class="report-left">{{ formatReportType(val.msgType) }}</div>
                            <div class="report-right">
                                <div>
                                    <div>
                                        <span>消息来源：</span>
                                        <span>{{ val.msgSource }}</span>
                                    </div>
                                    <div>
                                        <span>消息ID：</span>
                                        <span>{{ val.msgId }}</span>
                                    </div>
                                    <div>
                                        <span>消息生产者：</span>
                                        <span>{{ val.producer }}</span>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <span>震级：</span>
                                        <span>{{ val.magnitude }}</span>
                                    </div>
                                    <div>
                                        <span>震源深度：</span>
                                        <span>{{ val.focdepth }}</span>
                                    </div>
                                    <div>
                                        <span>发震时间：</span>
                                        <span>{{ val.oritimeStr }}</span>
                                    </div>
                                    <div>
                                        <span>震中地名：</span>
                                        <span>{{ val.locname }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <pagination v-show="reportTotal > 0" :total="reportTotal" :page.sync="queryReportParams.pageNum"
                    :limit.sync="queryReportParams.pageSize" @pagination="getReportList" />
            </el-tab-pane>
            <el-tab-pane label="气象日志" name="weather">
                <div class="card-container">
                    <el-row :gutter="10">
                        <el-form :model="queryWeatherParams" ref="queryWeatherForm" :inline="true" label-width="80px">
                            <el-col :span="18" :offset="0">
                                <el-form-item label="省" prop="province">
                                    <el-input v-model="queryWeatherParams.province" :style="'width:215px'"
                                        placeholder="请输入省" clearable size="small" @keyup.enter.native="handleQuery" />
                                </el-form-item>
                                <el-form-item label="市" prop="city">
                                    <el-input v-model="queryWeatherParams.city" :style="'width:215px'" placeholder="请输入市"
                                        clearable size="small" @keyup.enter.native="handleQuery" />
                                </el-form-item>
                                <el-form-item label="预警类型" prop="signalType">
                                    <el-select v-model="queryWeatherParams.signalType" clearable :style="'width:215px'"
                                        placeholder="请选择所属项目">
                                        <el-option :value="item" :label="item" v-for="(item, index) in signalOptions"
                                            :key="index + 'type'">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="预警等级" prop="signalLevel">
                                    <el-select v-model="queryWeatherParams.signalLevel" clearable :style="'width:215px'"
                                        placeholder="请选择所属项目">
                                        <el-option :value="item" :label="item" v-for="(item, index) in levelOptions"
                                            :key="index + 'level'">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="时间" prop="time">
                                    <span @click.once="changeInitCalendarPage" class="date-box">
                                        <el-date-picker v-model="queryWeatherParams.time" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            value-format="timestamp" :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item>
                                    <el-button icon="el-icon-refresh" size="mini" @click="resetWeatherQuery">重置</el-button>
                                    <el-button icon="el-icon-search" size="mini" @click="handleWeatherQuery(true)">所有记录
                                    </el-button>
                                    <el-button icon="el-icon-search" size="mini" @click="handleWeatherTogether">当前记录
                                    </el-button>
                                    <!-- <el-button  icon="el-icon-search" size="mini" @click="handleWeatherQuery">搜索
                    </el-button> -->
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-row>
                </div>
                <div class="card-container">
                    <div class="weather-container" v-for="(item, index) in weatherList" :key="index">
                        <div class="collapse-top">
                            <div class="left">
                                <span>事件ID:</span>
                                <span>{{ item.uuId }}</span>
                                <span :class="['weather-tag', formatLevelColor(item.signalLevel)]">{{ item.signalType
                                }}</span>
                                <span :class="['weather-tag', formatLevelColor(item.signalLevel)]">{{ item.signalLevel
                                }}</span>
                                <svg-icon class-name="warn-icon"
                                    :icon-class="item.isResponse == '已响应' ? 'responded' : 'unresponse'" />
                            </div>
                            <div class="right">
                                <span @click="handleWeatherRespon(item)">响应</span>
                            </div>
                        </div>
                        <div class="weather-content">
                            <p class="weather-title">{{ item.head }}</p>
                            <p><span>预警时间：</span><span>{{ item.issueTime }}</span></p>
                            <p><span>解除时间：</span><span>{{ item.relieveTime }}</span></p>
                            <p>{{ item.issueContent }}</p>
                            <div><svg-icon class-name="gps-icon" icon-class="gps" /><span>{{ item.address }}</span></div>
                        </div>
                    </div>

                </div>
                <pagination v-show="weatherTotal > 0" :total="weatherTotal" :page.sync="queryWeatherParams.pageNum"
                    :limit.sync="queryWeatherParams.pageSize" @pagination="getWeatherList" />
            </el-tab-pane>
            <el-tab-pane label="自检日志" name="syslog">
                <el-row>
                    <el-form :model="syslogParams" ref="syslogParams" :inline="true" label-width="120px" class="logs">
                        <el-col :span="10" :offset="0" class="log-date">
                            <el-form-item label="查询时间" prop="date" label-width="80px">
                                <span @click.once="changeInitCalendarPage" class="date-box">
                                    <el-date-picker v-model="syslogParams.date" type="datetimerange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"
                                        :picker-options="pickerOptions">
                                    </el-date-picker>
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1" :offset="-1">
                            <el-form-item>
                                <el-button type="primary" size="mini" @click="syslogQuery">查询
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <el-table v-loading="syslogLaod" :data="syslogData">
                    <el-table-column prop="checkTime" min-width="100" align="center" show-overflow-tooltip label="检查时间" />
                    <el-table-column prop="checkStatus" align="center" show-overflow-tooltip label="检查总结果">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_checkall_status" :value="scope.row.checkStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="networkStatus" align="center" show-overflow-tooltip label="网络状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_check_status" :value="scope.row.networkStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="manageStatus" align="center" show-overflow-tooltip label="管理服务状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_check_status" :value="scope.row.manageStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="mqttStatus" align="center" show-overflow-tooltip label="预警服务状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_check_status" :value="scope.row.mqttStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="intensityStatus" align="center" show-overflow-tooltip label="烈度计状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_check_status" :value="scope.row.intensityStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="hornStatus" align="center" show-overflow-tooltip label="喇叭状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_check_status" :value="scope.row.hornStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="lightStatus" align="center" show-overflow-tooltip label="报警灯状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_check_status" :value="scope.row.lightStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="cameraStatus" align="center" show-overflow-tooltip label="摄像头状态">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_check_status" :value="scope.row.cameraStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkType" align="center" show-overflow-tooltip label="检测类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.checkType == '1' ? '自动检测' : '人工检测' }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="syslogTotal > 0" :total="syslogTotal" :page.sync="syslogParams.pageNum"
                    :limit.sync="syslogParams.pageSize" @pagination="getsysLogList" />
            </el-tab-pane>
            <el-tab-pane label="系统日志" name="logs">
                <div ref="logcontent">
                    <div class="card-container">
                        <el-row>
                            <el-form :model="logParams" ref="queryForm" :inline="true" label-width="120px">
                                <el-col :span="6" :offset="0">
                                    <el-form-item label="查询时间" prop="date" label-width="80px">
                                        <el-date-picker type="date" v-model="logParams.date" format="yyyy-MM-dd"
                                            value-format="timestamp">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="16" :offset="0">
                                    <el-form-item label="系统日志分类" prop="logtype">
                                        <!-- <el-select v-model="logParams.logtype" :style="'width:400px'" multiple
                                            placeholder="请选择系统日志分类">
                                            <el-option v-for="item in this.dict.type.sys_log_type" :key="item.value"
                                                :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select> -->
                                        <el-checkbox-group v-model="logParams.logtype" style="width: 650px;">
                                            <el-checkbox v-for="item in this.dict.type.sys_log_type" :label="item.value"
                                                :key="item.value">{{ item.label }}</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="1" :offset="-1">
                                    <el-form-item>
                                        <el-button size="mini" @click="logQuery">下载
                                        </el-button>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-row>
                    </div>
                    <div class="card-container">
                        <el-row class="log-box" :gutter="10">
                            <el-input v-loading="logLoading" type="textarea" disabled :autosize="{ minRows: 10 }"
                                v-model="logText">
                            </el-input>
                        </el-row>
                    </div>

                </div>
            </el-tab-pane>
            <el-tab-pane label="历史日志" name="historyLogs">
                <div class="card-container">
                    <el-table :data="logsList">
                        <el-table-column prop="name" align="center" show-overflow-tooltip label="名称" min-width="150" />
                        <el-table-column align="center" min-width="150" label="操作">
                            <template slot-scope="scope">
                                <div v-show="scope.row.size > 1">
                                    <el-button type="text" @click="handleViewLogs(scope.row)">预览</el-button>
                                    <el-button type="text" @click="handleLogsdown(scope.row)">下载</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="logsTotal > 0" :total="logsTotal" :page.sync="querylogsParams.pageNum"
                        :limit.sync="querylogsParams.pageSize" @pagination="handleCurrentChange" />
                </div>

            </el-tab-pane>
        </el-tabs>
        <el-dialog title="视频预览" append-to-body :visible.sync="dialogVideo" width="40%">
            <div class="card-container" style="position: relative;">
                <video width="100%" height="100%" :src="videoUrl" controls preload="auto">
                    <!-- <source  type="video/mp4"> -->
                </video>
            </div>
        </el-dialog>
        <el-dialog title="日志预览" append-to-body :visible.sync="dialogLogs" width="40%">
            <div class="card-container">
                <el-input type="textarea" disabled :rows="30" v-model="historyLogText">
                </el-input>
            </div>
        </el-dialog>
        <el-dialog title="报文" append-to-body :visible.sync="dialogVisible" width="30%">
            <div class="card-container">
                <json-viewer :value="messageData" :expand-depth="5" copyable boxed expanded></json-viewer>
            </div>

        </el-dialog>
    </div>
</template>
<script>
import {
    downloadLogFile,
    getWarningMessage,
    getQuickReportMessage,
    getListByEewId,
    getDeviceWarningList,
    getDeviceQuickReportList,
    getWeatherWarningList,
    getDeviceWeatherMessageList,
    systemCheckLog
} from "@/api/allDevice/allDevice";
import minioClient from '@/plugins/minio'
export default {
    dicts: ["sys_log_type", "sys_msg_type", "sys_report_type", "sys_sever_status", "sys_check_status", "sys_checkall_status"],
    data() {
        return {
            dialogLogs: false,
            dialogVideo: false,
            videoUrl: null,
            historyLogText: '',
            logsTotal: 0,
            logsList: [],
            activeName: "warn",
            messageData: {},
            dialogVisible: false,
            tabPosition: 'left',
            // 系统自检查询条件
            syslogParams: {
                pageNum: 1,
                pageSize: 10,
                code: null,
                startTime: null,
                endTime: null,
                date: null,
            },
            syslogLaod: false,
            syslogData: [],
            syslogTotal: 0,
            queryWarnParams: {
                pageNum: 1,
                pageSize: 10,
                eewId: null,
                msgSource: null,
                warnSearchTime: null,
                startTime: null,
                endTime: null,
                msgType: null,
                msgIds: null
                // type: 1,
            },
            warnbtn: false,
            warnLaod: true,
            warnTabData: [],
            warnTotal: 0,
            queryReportParams: {
                pageNum: 1,
                pageSize: 10,
                eewId: null,
                reportSearchTime: null,
                startTime: null,
                endTime: null,
                msgType: null,
                msgIds: null
            },
            reportTabData: [],
            reportLaod: true,
            reportTotal: 0,
            weatherLaod: true,
            weatherList: [],
            queryWeatherParams: { pageNum: 1, pageSize: 10, code: null, province: null, city: null, signalType: null, signalLevel: null, time: null, startTime: null, endTime: null, msgIds: null },//
            signalOptions: ['高温', '大风', '雷电', '暴雨', '强对流', '冰雹', '雷雨大风', '大雾', '海上大风', '雷暴大风', '沙尘暴', '海上雷雨大风', '海上雷电', '海上大雾'],
            levelOptions: ['蓝色', '黄色', '橙色', '红色'],
            weatherTotal: 0,
            pickerOptions: {
                //禁用当前日期之前的日期
                disabledDate(time) {
                    //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
                    return time.getTime() > Date.now();
                },
            },
            logText: '',
            logLoading: false,
            // 日志查询条件
            logParams: {
                date: new Date().setHours(0, 0, 0, 0),
                logtype: ['1', '2', '3', '4', '5', '6'],
            },
            querylogsParams: {
                pageNum: 1,
                pageSize: 10
            },
            paramList: this.pageData,
        };
    },
    props: {
        pageData: {
            type: Object,
            default: {},
        },
    },
    created() {
        this.getWarnList();
        console.log(this.warnTabData)
    },
    methods: {
        // tab点击事件
        async handleClick(tab, event) {
            if (tab.name == "warn") {
                this.getWarnList();
                return
            }
            if (tab.name == "report") {
                this.getReportList();
                return
            }

            if (tab.name == "logs") {
                return
            }
            if (tab.name == "syslog") {
                this.getsysLogList()
                return
            }
            if (tab.name == "weather") {
                this.getWeatherList();
                return
            }
            if (tab.name == 'screen') {
                this.getScreenInfo();
                return
            }
            if (tab.name == 'historyLogs') {
                this.logsTotalList = []
                this.getLogsList();
                return
            }
            if (this.timer == null) {
                this.getRealTimeData()
            }
        },

        formatReportType(val) {
            switch (val) {
                case '0401':
                    return '自动速报';
                case '0402':
                    return '正式速报';
                case '0303':
                    return '测试速报';
                default:
                    break;
            }
        },
        formatType(val) {
            switch (val) {
                case '0101':
                    return '正式预警';
                case '0201':
                    return '演练预警';
                case '0301':
                    return '测试预警';
                case '0199':
                    return '取消消息';

                default:
                    break;
            }
        },
        formatLevel(val) {
            switch (val) {
                case '红色预警':
                    return 'red';
                case '橙色预警':
                    return 'orange';
                case '黄色预警':
                    return 'yellow';
                case '蓝色预警':
                    return 'blue';
                // case 'blue':
                // 	return '演练预警';
                default:
                    return 'none';
            }
        },
        formatLevelColor(val) {
            switch (val) {
                case '红色':
                    return 'red';
                case '橙色':
                    return 'orange';
                case '黄色':
                    return 'yellow';
                case '蓝色':
                    return 'blue';
                // case 'blue':
                // 	return '演练预警';
                default:
                    return '';
            }
        },
        // 系统自检日志查询
        syslogQuery() {
            this.syslogParams.pageNum = 1;
            if (this.syslogParams.date) {
                this.syslogParams.startTime = this.syslogParams.date[0]
                this.syslogParams.endTime = this.syslogParams.date[1]
            } else {
                this.syslogParams.startTime = null
                this.syslogParams.endTime = null
            }
            this.getsysLogList();
        },
        // 系统自检日志
        async getsysLogList() {
            this.syslogLaod = true;
            this.syslogParams.code = this.paramList.code
            const res = (await systemCheckLog(this.syslogParams)) || "";
            this.syslogData = res.rows
            this.syslogTotal = res.total
            console.log(res, 'async')
            this.syslogLaod = false;
        },
        // 获取预警列表
        async getWarnList() {
            this.warnLaod = true;
            this.queryWarnParams.code = this.pageData.code;
            const res = await getWarningMessage(this.queryWarnParams);
            if (res.code == 200) {
                this.warnLaod = false;
                this.warnTotal = res.total;
                res.rows.forEach((item) => {
                    // 获取该bucket下的所有对象
                    const objectsStream = minioClient.listObjects('yjzd', this.pageData.code + '/Events/' + item.eewId, true);
                    // 定义一个数组来保存所有对象路径
                    const objects = [];
                    objectsStream.on("data", (object) => {
                        objects.push(object.name);
                    });
                    // 在流结束时输出所有对象的路径
                    objectsStream.on("end", () => {
                        if (objects.length > 0) {
                            let _arr = objects.filter(item => {
                                return item.indexOf('mp4') != -1
                            })
                            if (_arr.length > 0) {
                                item.filePath = _arr[0]
                                return item.checkViedo = true
                            } else {
                                return item.checkViedo = false
                            }
                        } else {
                            return item.checkViedo = false
                        }
                    });
                    // 遇到错误时输出错误信息
                    objectsStream.on("error", (err) => {
                        console.log(err);
                    });
                    item.viewTableList = [];
                    getListByEewId({ code: this.pageData.code, eewId: item.eewId }).then(
                        (res) => {
                            if (res.code == 200) {
                                // res.data.forEach((row) => {
                                //     item.viewTableList.push(row);
                                // });
                                item.viewTableList = res.data
                            }
                        }
                    );

                });
                // this.$nextTick(()=>{
                setTimeout(() => {
                    this.warnTabData = res.rows;
                }, 1000)

                console.log(this.warnTabData, ' this.warnTabData')
                // })

            }
        },
        // 获取速报列表
        async getReportList() {
            this.reportLaod = true;
            this.queryReportParams.code = this.pageData.code;
            const res = await getQuickReportMessage(this.queryReportParams);
            if (res.code == 200) {
                this.reportLaod = false;
                this.reportTabData = res.rows;
                this.reportTotal = res.total;
            }
        },
        // 同步设备预警查询
        async handleWarningTogether() {
            // this.queryWarnParams.code = this.pageData.code;
            const res = await getDeviceWarningList({ code: this.pageData.code });
            if (res.code == 200) {
                if (res.msg == '') {
                    this.warnTabData = []
                    this.warnTotal = 0;
                    return

                }
                this.queryWarnParams.msgIds = res.msg
                this.handleWarnQuery(false)
            }
        },
        resetWeatherQuery() {
            this.queryWeatherParams.startTime = null
            this.queryWeatherParams.endTime = null
            this.resetForm("queryWeatherForm");
            this.handleWeatherQuery(true);
        },
        // 预警条件查询
        handleWarnQuery(item) {
            if (item) {
                this.queryWarnParams.msgIds = null
            }
            this.queryWarnParams.pageNum = 1;
            if (this.queryWarnParams.warnSearchTime) {
                this.queryWarnParams.startTime = this.queryWarnParams.warnSearchTime[0]
                this.queryWarnParams.endTime = this.queryWarnParams.warnSearchTime[1]
            }
            this.getWarnList();
        },
        // 预警条件查询重置
        resetWarnQuery() {
            this.resetForm("queryWarnParams");
            this.handleWarnQuery(true);
        },
        // 预警消息
        handleWarnMessage(row) {
            this.messageData = JSON.parse(row.receiveMessage);
            this.dialogVisible = true;
        },
        // 预警回复
        handleWarnReceive(row) {
            this.messageData = JSON.parse(row.replyMessage);
            this.dialogVisible = true;
        },
        // 预警响应
        handleWarnRespon(row) {
            // this.messageData = JSON.parseObject(row.statisticsMessage)
            this.messageData = JSON.parse(row.statisticsMessage);
            this.dialogVisible = true;
        },
        // 速报条件查询
        handleReportQuery(item) {
            if (item) {
                this.queryReportParams.msgIds = null
            }
            this.queryReportParams.pageNum = 1;
            if (this.queryReportParams.reportSearchTime) {
                this.queryReportParams.startTime = this.queryReportParams.reportSearchTime[0]
                this.queryReportParams.endTime = this.queryReportParams.reportSearchTime[1]
            }
            this.getReportList();
        },
        // 速报条件查询重置
        resetReportQuery() {
            this.resetForm("queryReportParams");
            this.handleReportQuery(true);
        },
        // 同步设备速报查询
        async handleReportTogether() {
            // this.queryWarnParams.code = this.pageData.code;
            const res = await getDeviceQuickReportList({ code: this.pageData.code });
            if (res.code == 200) {
                if (res.msg == '') {
                    this.reportTabData = []
                    this.reportTotal = 0;
                    return
                }
                this.queryReportParams.msgIds = res.msg
                this.handleReportQuery(false)
            }
        },
        // 速报响应
        handleRespon(row) {
            this.messageData = JSON.parse(row.statisticsMessage)
            console.log(this.messageData, 'this.messageData')
            this.dialogVisible = true;
        },
        // 速报消息
        handleMessage(row) {
            this.messageData = JSON.parse(row.receiveMessage);
            this.dialogVisible = true;
        },
        // 速报回复
        handleReceive(row) {
            this.messageData = JSON.parse(row.replyMessage);
            this.dialogVisible = true;
        },
        handleWeatherRespon(row) {
            this.messageData = JSON.parse(row.responseMessage);
            this.dialogVisible = true;
        },
        async getWeatherList() {
            this.queryWeatherParams.code = this.pageData.code;
            const res = await getWeatherWarningList(this.queryWeatherParams)
            if (res.code == 200) {
                this.weatherList = res.rows
                this.weatherTotal = res.total
            }
        },

        handleWeatherQuery(item) {
            if (item) {
                this.queryWeatherParams.msgIds = null
            }
            if (this.queryWeatherParams.time) {
                this.queryWeatherParams.startTime = this.queryWeatherParams.time[0]
                this.queryWeatherParams.endTime = this.queryWeatherParams.time[1]
            } else {
                this.queryWeatherParams.startTime = null
                this.queryWeatherParams.endTime = null
            }
            this.queryWeatherParams.pageNum = 1;
            this.getWeatherList()
        },

        async handleWeatherTogether() {
            const res = await getDeviceWeatherMessageList({ code: this.pageData.code });
            if (res.code == 200) {

                if (res.msg == '') {
                    this.weatherList = []
                    this.weatherTotal = 0
                    return
                }
                this.queryWeatherParams.msgIds = res.msg
                this.handleWeatherQuery()
            }
        },
        resetWeatherQuery() {
            this.queryWeatherParams.startTime = null
            this.queryWeatherParams.endTime = null
            this.resetForm("queryWeatherForm");
            this.handleWeatherQuery(true);
        },
        // 表格展开
        handleExpandChange(row, rows) {
            // 假设每行数据中有一个id属性
            const isExpend = rows.some((r) => r.eewId === row.eewId); // 判断当前行展开状态
            if (isExpend) {
                if (row.viewTableList.length == 0) {
                    getListByEewId({ code: this.pageData.code, eewId: row.eewId }).then(
                        (res) => {
                            if (res.code == 200) {
                                res.data.forEach((item) => {
                                    row.viewTableList.push(item);
                                });
                            }
                        }
                    );
                }
            } else {
                return;
            }
        },
        // 日志查询按钮
        async logQuery() {
            let oneday = 1000 * 60 * 60 * 24;
            let time = this.logParams.date + oneday;
            if (this.logParams.logtype) {
                this.logLoading = true;
                let data = {
                    code: this.paramList.code,
                    startTime: this.logParams.date,
                    endTime: time,
                    logType: this.logParams.logtype.join(),
                };
                this.logText = (await downloadLogFile(data)) || "";
                this.logLoading = false;
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.$refs.param.scrollTop = this.$refs.logcontent.clientHeight;
                    }, 13);
                });
            } else {
                this.$modal.msgError("查询时间不能为空");
            }
        },
        // 时间空间默认当前月和上一月
        changeInitCalendarPage() {
            let element = document.querySelectorAll(
                ".el-picker-panel__icon-btn.el-icon-arrow-left"
            )
            console.log(element, 'element')
            if (element) element[element.length - 1].click();
        },
        handleView(row) {
            // BOEV10TEST02/Events/YL.20230710113614781
            // this.getAllObjects('yjzd', 'BOEV10TEST02/Events/YL.20230710113614781')
            // this.getVideoList('yjzd', this.pageData.code + '/Events/' + row.eewId)
            this.getVideoFileUrl(row.filePath)
        },
        // 下载视频文件
        handleVideodown(row) {
            const backetName = "yjzd";
            minioClient.getObject(backetName, row.filePath, (err, dataStream) => {
                if (err) callback(err);
                const arr = [];
                let size = 0;
                dataStream.on("data", (chunk) => {
                    if (chunk.length > 0) {
                        arr.push(chunk);
                        size += chunk.length;
                    }
                });
                dataStream.on("end", () => {
                    const u8arr = new Uint8Array(size);
                    let u8arrIndex = 0;
                    for (let i = 0; i < arr.length; i++) {
                        for (let j = 0; j < arr[i].length; j++) {
                            u8arr[u8arrIndex] = arr[i][j];
                            u8arrIndex += 1;
                        }
                    }
                    const arrBuffer = u8arr.buffer;
                    const blob = new Blob([arrBuffer]);
                    const blobUrl = URL.createObjectURL(blob);
                    const fileName = this.getFileName(row.filePath);
                    const a = document.createElement("a");
                    a.setAttribute("href", blobUrl);
                    a.setAttribute("download", fileName);
                    a.click();
                });
                dataStream.on("error", (er) => {
                    callback(er);
                });
            });
        },
        //下载文件
        getVideoFileUrl(filePath) {
            const backetName = "yjzd";
            minioClient.getObject(backetName, filePath, (err, dataStream) => {
                if (err) callback(err);
                this.dialogVideo = true
                this.videoUrl = dataStream.url
            });
        },
        getFileName(url) {
            // 通过最后一个斜杠将URL分割成数组
            var parts = url.split('/');
            // 获取数组中最后一个元素
            var fileName = parts[parts.length - 1];
            // 返回文件名
            return fileName;
        },
        // 获取日志列表
        getLogsList() {
            // 获取该bucket下的所有对象
            const objectsStream = minioClient.listObjects('yjzd', this.pageData.code + '/Logs', true);
            // 定义一个数组来保存所有对象路径
            objectsStream.on("data", (object) => {
                console.log(object, 'object')
                this.logsTotalList.unshift({ name: this.getFileName(object.name), size: object.size });
            });
            // 在流结束时输出所有对象的路径
            objectsStream.on("end", () => {
                this.handleCurrentChange()
            });
            // 遇到错误时输出错误信息
            objectsStream.on("error", (err) => {
                console.log(err);
            });
        },
        handleCurrentChange() {
            let _data = []
            _data = this.logsTotalList.slice((this.querylogsParams.pageNum - 1) * this.querylogsParams.pageSize, this.querylogsParams.pageNum * this.querylogsParams.pageSize)
            this.logsTotal = this.logsTotalList.length
            this.logsList = _data
        },
        // Utf8Array转字符串
        Utf8ArrayToStr(array) {
            var out, i, len, c;
            var char2, char3;
            out = "";
            len = array.length;
            i = 0;
            while (i < len) {
                c = array[i++];
                switch (c >> 4) {
                    case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                        // 0xxxxxxx
                        out += String.fromCharCode(c);
                        break;
                    case 12: case 13:
                        // 110x xxxx 10xx xxxx
                        char2 = array[i++];
                        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                        break;
                    case 14:
                        // 1110 xxxx 10xx xxxx 10xx xxxx
                        char2 = array[i++];
                        char3 = array[i++];
                        out += String.fromCharCode(((c & 0x0F) << 12) |
                            ((char2 & 0x3F) << 6) |
                            ((char3 & 0x3F) << 0));
                        break;
                }
            }

            return out;
        },
        // 历史日志预览
        handleViewLogs(row) {
            const backetName = "yjzd";
            //  this.pageData.code + '/Logs/' + row.name 'BOEV10000001/Logs/2023-07-07.txt'
            minioClient.getObject(backetName, this.pageData.code + '/Logs/' + row.name, (err, dataStream) => {
                if (err) callback(err);
                console.log(dataStream, 'dataStream')
                dataStream.on("data", (chunk) => {
                    if (chunk.length > 0) {
                        this.historyLogText = this.Utf8ArrayToStr(chunk)
                        this.dialogLogs = true
                    }
                });
            });
        },
        // 日志下载
        handleLogsdown(row) {
            const backetName = "yjzd";
            minioClient.getObject(backetName, this.pageData.code + '/Logs/' + row.name, (err, dataStream) => {
                if (err) callback(err);
                const arr = [];
                let size = 0;
                dataStream.on("data", (chunk) => {
                    if (chunk.length > 0) {
                        console.log(arr, chunk)
                        arr.push(chunk);
                        size += chunk.length;
                    }
                });
                dataStream.on("end", () => {
                    const u8arr = new Uint8Array(size);
                    let u8arrIndex = 0;
                    for (let i = 0; i < arr.length; i++) {
                        for (let j = 0; j < arr[i].length; j++) {
                            u8arr[u8arrIndex] = arr[i][j];
                            u8arrIndex += 1;
                        }
                    }
                    const arrBuffer = u8arr.buffer;
                    const blob = new Blob([arrBuffer]);
                    const blobUrl = URL.createObjectURL(blob);
                    const a = document.createElement("a");
                    a.setAttribute("href", blobUrl);
                    a.setAttribute("download", row.name);
                    a.click();
                });
                dataStream.on("error", (er) => {
                    callback(er);
                });
            });
        },
    }
};
</script>

<style lang="scss" scoped>
$Color-II: #0194ff;
$Color-III: #ffe02c;
$Color-IV: #ffa318;
$Color-V: #ff4d4f;

$bgColor-II: rgba(1, 148, 255, 0.08);
$bgColor-III: rgba(255, 224, 44, 0.1);
$bgColor-IV: rgba(255, 163, 24, 0.08);
$bgColor-V: rgba(255, 77, 79, 0.08);



// .none {
//     color: $Color-I;
//     background: $bgColor-I;
// }

.warn-container {
    margin-top: 20px;
    max-height: 485px;
    overflow-y: auto;
}

.card-container {
    max-height: 475px;
    overflow-y: auto;
}

.collapse-title {
    display: flex;

    >div {
        font-size: 16px;
        margin: 0 20px;

        >span:last-child {
            color: rgba(255, 255, 255, .6);
        }
    }
}

.collapse-content {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.collapse-content:last-child {
    border-bottom: none
}


.collapse-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        // display: flex;
        // align-items: center;
        color: #fff;
        font-size: 18px;
        font-weight: 600;

        >span:nth-child(2) {
            margin-right: 20px;
        }

    }

    .right {
        color: rgba(255, 255, 255, .6);
        cursor: pointer;

        >span {
            margin: 0 10px;
        }

        >span:hover {
            color: rgba(106, 215, 202, 1);
        }
    }
}

.collapse-bottom {
    margin-top: 10px;
    display: flex;
    align-items: center;

    >div {
        margin: 0 10px;
    }

    >div:first-child {
        font-size: 16px;
        margin-left: 0;
    }
}

.report-container {
    padding: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.report-content {
    display: flex;
    height: 44px;
    margin: 10px 0;


    .report-left {
        margin-right: 15px;
        padding: 0 4px;
        width: 44px;
        height: 44px;
        text-align: center;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(255, 255, 255, 0.6);
    }

    .report-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        >div {
            display: flex;

            >div {
                margin: 0 10px;
            }

        }
    }
}

.weather-tag {
    margin-left: 20px;
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #fff;
    color: rgba(255, 255, 255, .6);
    background-color: transparent;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 400;
}

.weather-container {
    padding: 20px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.24);
}

.weather-content {
    padding-right: 40px;

}

.weather-title {
    font-size: 16px;
}

.gps-icon {
    margin-right: 5px;
    font-size: 10px;
    vertical-align: middle;
}

.warn-icon {
    // width: 4em;
    height: 30px;
    font-size: 75px;
    vertical-align: middle;
}

.red {
    border-color: $Color-V;
    color: $Color-V;
    background: $bgColor-V;
}

.orange {
    border-color: $Color-IV;
    color: $Color-IV;
    background: $bgColor-IV;
}

.yellow {
    border-color: $Color-III;
    color: $Color-III;
    background: $bgColor-III;
}

.blue {
    border-color: $Color-II;
    color: $Color-II;
    background: $bgColor-II;
}

::v-deep .el-tabs__header {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    padding-top: 60px;
    background-color: rgba(35, 39, 43, .2);
}

::v-deep .el-tabs--left .el-tabs__item.is-left {
    padding-left: 40px;
    text-align: left;
}

::v-deep .el-tabs__item.is-active {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}

::v-deep .el-tabs__item:hover {
    color: #fff;
}

::v-deep .el-tabs__item {
    font-weight: 600;
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
}

::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left::after {
    width: 0
}


::v-deep .el-tabs--left .el-tabs__active-bar.is-left {
    left: 0;
    right: auto;
    width: 3px;
    margin-top: 12px;
    height: 14px !important;
    background-color: #fff;
}

::v-deep .el-tabs__content {
    margin-left: 160px;
}
</style>